<template>
    <div>
        <el-dialog
            :title="title === 'add' ? '新增' : '编辑'"
            :close-on-click-modal="false"
            :visible.sync="dialogVisible"
            width="35%"
            :info="info"
            @close="closeDialog"
        >
            <el-form ref="form" :inline="false" :model="formData" :rules="rules" label-width="150px" size="normal">
                <el-form-item label="萌宠等级" prop="level">
                    <el-input
                    v-model="formData.level"
                    placeholder="请输入萌宠等级"
                    />
                </el-form-item>
                <el-form-item label="升级经验" prop="exp">
                    <el-input
                    v-model="formData.exp"
                    placeholder="请输入升级经验"
                    />
                </el-form-item>
                
                <!-- <el-form-item label="横幅基本文案颜色" prop="level">
                    <el-input
                    v-model="formData.level"
                    placeholder="请输入横幅基本文案颜色"
                    />
                </el-form-item>
                <el-form-item label="横幅动态文案颜色" prop="level">
                    <el-input
                    v-model="formData.level"
                    placeholder="请输入横幅动态文案颜色"
                    />
                </el-form-item> -->
                
                <!-- <el-form-item label="横幅样式" prop="detail">
                    <div class="awardBox">
                        <div class="awardInfo" :class="{'hide_box': formData.detail, 'show_box': !formData.detail}">
                            <img v-if="formData.detail" :src="formData.detail" class="avatar" />
                            <el-upload
                                v-else
                                ref="upload"
                                :auto-upload="true"
                                :http-request="customizeUpload"
                                :on-success="handlePictureSuccess1"
                                action=""
                                class="upload-demo"
                                :limit="1"
                                list-type="picture-card"
                            >
                                <i slot="default" class="el-icon-plus"></i>
                            </el-upload>
                            <span class="closeIcon" @click="handlePictureRemove1"><i class="el-icon-delete"></i></span>
                        </div>
                    </div>
                </el-form-item> -->
                <el-form-item label="配置技能" prop="skill_id">
                    <div v-for="(item, index) in formData.skillList" :key="item.id">
                        <div class="flex items-center">
                            <el-image class="imageStyle" :src="item.icon" fit="fill" :lazy="true"></el-image>
                            <p class="ml-4">{{ item.name }}</p>
                            <span class="delete ml-4" @click="handleDel(index)">删除</span>
                        </div>
                        <div class="mb-4">
                            <el-form-item
                                label="技能等级"
                                label-width="100px"
                                :prop="'skillList.'+ index + '.skill_level'"
                                :rules="[
                                    { required: true, message: '技能等级不能为空', trigger: 'blur'},
                                ]"
                            >
                                <el-input
                                    v-model="item.skill_level"
                                    placeholder="请输入技能等级"
                                />
                            </el-form-item>
                            <el-form-item 
                            label="持续时长" 
                            :prop="'skillList.'+ index + '.count'"
                            :rules="[
                                { required: true, message: '持续时长不能为空', trigger: 'blur'},
                            ]"
                            label-width="100px">
                                <el-input
                                v-model="item.count"
                                placeholder="请输入持续时长"
                                />
                            </el-form-item>
                            <el-form-item 
                            label="CD时长" 
                            :prop="'skillList.'+ index + '.cool_down'"
                            :rules="[
                                { required: true, message: 'CD时长不能为空', trigger: 'blur'},
                            ]"
                            label-width="100px">
                                <el-input
                                v-model="item.cool_down"
                                placeholder="请输入CD时长"
                                />
                            </el-form-item>
                        </div>
                    </div>
                </el-form-item>
                <el-form-item label="">
                    <el-button type="primary" @click="allocationSkill">添加技能</el-button>
                </el-form-item>
                
            </el-form>

            <section slot="footer">
                <el-button @click="handleCancel">取消</el-button>
                <el-button type="primary" @click="onSubmit()" :disabled="disabled">确定</el-button>
            </section>
        </el-dialog>

        <!-- 新增技能 -->
        <el-dialog
            title="配置技能"
            :visible.sync="allocationSkillVisible"
            width="30%"
            @close="handleClose">
            <div class="flex">
                <el-input v-model="name" placeholder="请输入搜索的技能名称"></el-input>
                <el-button type="primary" size="default" @click="handleSearch" class="ml-4">搜索</el-button>
                <el-button type="primary" size="default" @click="handleReset">重置</el-button>
            </div>
            
            <section>
                <el-table ref="multipleTable" :data="petSkillList" border stripe @selection-change="handleSelectionChange">
                    <el-table-column type="selection" width="80"></el-table-column>
                    <!-- <el-table-column label="单选框" width="200px">
                        <template slot-scope="scope">
                            <el-radio v-model="radio" :label="scope.$index"></el-radio>
                        </template>
                    </el-table-column> -->
                    <el-table-column label="技能图标">
                        <template slot-scope="{row}">
                            <el-image :src="row.icon" class="iconStyle" fit="fill" :lazy="true"></el-image>
                        </template>
                    </el-table-column>
                    <el-table-column label="技能名称" prop="name"></el-table-column>
                    <!-- <el-table-column label="技能等级" prop="level"></el-table-column> -->
                </el-table>
                
            </section>
            
            <span slot="footer">
                <el-button @click="allocationSkillVisible = false">取消</el-button>
                <el-button type="primary" @click="handleAllocationSkill">确定</el-button>
            </span>
        </el-dialog>
        
    </div>
</template>
  
<script>
  import { petSkillList, petLevelSave, petLevelEdit } from '@/api/petsManagement'
  export default {
    name: '',
    props: {
        dialogVisible: {
            type: Boolean,
            default: false
        },
        title: {
            type: String,
            default: 'add'
        },
        info: {
            type: Object,
            default: () => {
                return {
                    id: undefined,
                    level: undefined,
                    exp: undefined,
                    skill: [{
                        skill_id: undefined,
                        skill_level: undefined,
                        count: undefined,
                        cool_down: undefined,
                    }]
                }
            }
        },
        
    },
    data() {
      return {
        allocationSkillVisible: false,
        name: undefined,
        petSkillList: [],
        radio: undefined,
        formData: {
            id: undefined,
            level: undefined,
            exp: undefined,
            skillList: [],
            skill: [
                // {
                //     skill_id: undefined,
                //     skill_level: undefined,
                //     count: undefined,
                //     cool_down: undefined,
                // }
            ]
        },
        rules: {
            level: [{ required: true, message: '请输入萌宠等级', trigger: 'blur' }],
            exp: [{ required: true, message: '请输入升级经验', trigger: 'blur' }],
            // skill_id: [{ required: true, message: '请配置萌宠技能', trigger: 'change' }],
            // skill_level: [{ required: true, message: '请输入萌宠技能等级', trigger: 'blur' }],
            // count: [{ required: true, message: '请输入技能持续时长', trigger: 'blur' }],
            // cool_down: [{ required: true, message: '请输入技能CD时长', trigger: 'blur' }]
        },
        fileListLength: 0,
        multipleSelection: [],
        disabled: false
      }
    },
    watch: {
        title: async function(newValue, oldValue) {
            console.log(newValue,'title',this.info)
            if (newValue === 'edit') {
                this.formData = {
                    id: this.info.id,
                    level: this.info.level,
                    exp: this.info.exp,
                    skillList: this.info.levelSkill
                }
                this.list = []
                this.petSkillList.map(item => {
                    if(item.id === this.info.skill_id) {
                        this.list = [item]
                        console.log('item',item)
                    }
                })
            }
        }
    },
    created() {
      this.getPetSkillList()
    },
  
    methods: {
        getPetSkillList(id) {
            petSkillList({
                page: 1,
                perPage: 1000,
                name: this.name,
                id: id
            }).then(res =>{
                if(res.code === 200) {
                    this.petSkillList = res.data.data
                }
            })
        },
        closeDialog() {
            if (this.$refs['form']) {
                this.$refs['form'].clearValidate(); // 清除整个表单的校验
                this.$refs['form'].resetFields() // 清除整个表单的校验
            }
            this.$emit('update:title', 'add')
            this.$emit('update:dialogVisible', false)
            this.formData = {
                id: undefined,
                level: undefined,
                exp: undefined,
                skill: [],
                skillList: []
            }
            this.multipleSelection = []
        },
        handleClose() {
            this.multipleSelection = []
            this.$refs.multipleTable.clearSelection()
        },
        handleCancel() {
            this.$emit('update:title', 'add')
            this.$emit('update:dialogVisible', false)
        },
        beforeAvatarUpload(file) {
            // const isJPG = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/webp' || file.type === 'image/gif'
            // const isLt2M = file.size / 1024 / 1024 < 2

            // if (!isJPG) {
            //     this.$message.error('请上传JPG/PNG格式的图片!')
            // }
            // if (!isLt2M) {
            //     this.$message.error('上传图片大小不能超过 2MB!')
            // }
            // return isJPG && isLt2M
        },
        onSubmit() {
            this.$refs['form'].validate(valid => {
                if (valid) {
                    for (let key in this.formData) {
                        this.formData[key] = !this.formData[key] ? undefined : this.formData[key]
                    }
                    this.formData.skill = JSON.stringify(this.formData.skillList)
                    // console.log(this.formData)
                    // return
                    this.disabled = true
                    if(this.formData.id) {

                        petLevelEdit(this.formData).then(res => {
                            if(res.code === 200) {
                                this.dialogVisible = false
                                this.$message({
                                    type: 'success',
                                    message: '操作成功'
                                })
                                this.$emit('update:title', 'add')
                                this.$emit('update:dialogVisible', false)
                                this.$emit('updateTable')
                            }
                            this.disabled = false
                        })
                    }else {
                        petLevelSave(this.formData).then(res => {
                            if(res.code === 200) {
                                this.dialogVisible = false
                                this.$message({
                                    type: 'success',
                                    message: '操作成功'
                                })
                                this.$emit('update:title', 'add')
                                this.$emit('update:dialogVisible', false)
                                this.$emit('updateTable')
                            }
                            this.disabled = false
                        })
                    }
                }
            })
        },
        handlePictureSuccess1() {
            this.formData.detail = this.ossLastImgUrl
        },
        handlePictureRemove1() {
            this.formData.detail = undefined
        },
        handleDel(index) {
            
            this.$confirm('确定删除？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.formData.skillList.splice(index, 1)
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
        },
        allocationSkill() {
            this.allocationSkillVisible = true
        },
        handleAllocationSkill() {
            // this.formData.skill = []
            this.multipleSelection.map(item => {
                item.skill_id =item.id
                this.formData.skillList.push(item)
            })
            this.allocationSkillVisible = false
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        handleSearch() {
            this.getPetSkillList()
        },
        handleReset() {
            this.name = undefined
            this.handleSearch()
        },
    }
  }
</script>
<style lang="scss" scoped>
  ::v-deep.avatar-uploader .el-upload {
    border        : 1px dashed #d9d9d9;
    border-radius : 6px;
    cursor        : pointer;
    position      : relative;
    overflow      : hidden;
  }
  
  .avatar-uploader .el-upload:hover {
    border-color : #409eff;
  }
  
  .avatar-uploader-icon {
    font-size   : 28px;
    color       : #8c939d;
    width       : 100px;
    height      : 100px;
    line-height : 100px;
    text-align  : center;
  }
  
  .avatar {
    width   : 100px;
    height  : 100px;
    display : block;
  }
  
  ::v-deep{ 
    .hide_box{
        .el-upload--picture-card {
            display: none;
        }
    }
    .el-upload-list__item {
        margin-right: 1em !important;
    }
    .el-form-item {
        .el-form-item {
            margin-bottom: 22px;
        }
    }
}

.iconStyle {
    width: 80px;
}
  .awardBox {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    .awardInfo {
        margin-right: 10px;
        border-radius: 4px;
        position: relative;
        overflow: hidden;
        width: 148px;
        height: 148px;
        border: 1px solid #c0ccda;
        border-radius: 6px;
        display: flex;
        align-items: center;
        justify-content: center;

        .closeIcon {
            position: absolute;
            top: 0;
            bottom: 0;
            right: 0;
            left: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 10px;
            background: rgba(0,0,0,.6);
            color: #ffffff;
            overflow: hidden;
            cursor: pointer;
            font-size: 18px;
            opacity: 0;
            z-index: 0;
        }
    }
    .hide_box:hover {
        .closeIcon {
            opacity: 1;
            z-index: 1;
        }
    }
    .show_box {
        .closeIcon {
            opacity: 0;
            z-index: -1;
        }
    }
}

.delete {
    color: red;
    cursor: pointer;
}
.imageStyle {
    width: 80px;
}
</style>
  